<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-ui-option-down ddp-lnb-down ddp-selected" [class.ddp-selected]="'cluster' == dataSubLayerKey">
  <div class="ddp-ui-down-title" (click)="clickDataSubPanel('cluster', $event)">
    <em class="ddp-icon-menumove"></em>
    {{'msg.page.analysis.cluster.title' | translate}}
  </div>
  <div class="ddp-ui-down-contents">
    <!-- active -->
    <!-- 활성화 off 일 때 ddp-disabled 추가 -->
    <div class="ddp-ui-active">
      <div class="ddp-wrap-option-slider">
        <span class="ddp-label-slider">{{'msg.page.prediction.span.active' | translate}}</span>
        <!-- Slide THREE -->
        <div class="ddp-checkbox-slide ddp-checkbox-automatic2">
          <input type="checkbox" value="None" id="check2" name="check">
          <label for="check2"><span class="ddp-slide"></span></label>
        </div>
        <!-- //Slide THREE -->
      </div>
      <!-- 설명 -->
      <div class="ddp-data-detail">
        {{'msg.page.analysis.cluster.allow.use.description' | translate}}<br />
        - {{'msg.page.ui.scatter' | translate}}
      </div>
      <!-- //설명 -->
    </div>
    <!-- //active -->
    <!-- checkbox -->
    <div class="ddp-wrap-option-checkbox ddp-clear">
      <div class="ddp-col-8">
        <label class="ddp-label-type">
          {{'msg.page.analysis.cluster.allow.section.count' | translate}}
        </label>
      </div>
      <div class="ddp-col-4">
        <component-select
          [array]="sectionList"
          (onSelected)="onChangeSection($event)">
        </component-select>
      </div>
    </div>
    <!-- checkbox -->

    <ul class="ddp-list-type">
      <li *ngFor="let item of clusterList; let index = index">
        <span class="ddp-box-color ddp-selected" style="background:#5fd7a5;"></span>
        <span class="ddp-data-name">{{'msg.page.analysis.cluster.title' | translate}}{{index + 1}}</span>
      </li>
    </ul>
  </div>

</div>
